<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
  components: {},
})
export default class HomeView extends Vue {
  @Prop() public iconClass!: string;

  @Prop() public className!: string;
  /**
   * 计算属性,获取图标名称,这个是master分支的代码
   */
  public get iconName() {
    return `#icon-${this.iconClass}`;
  }
  /**
   * 获取svg-class
   */
  public get svgClass() {
    if (this.className) {
      return "svg-icon " + this.className;
    } else {
      return "svg-icon";
    }
  }
  /**
   * 获取扩展的svg
   */
  public get styleExternalIcon() {
    return {
      mask: `url(${this.iconClass}) no-repeat 50% 50%`,
      "-webkit-mask": `url(${this.iconClass}) no-repeat 50% 50%`,
    };
  }
}
</script>
<style scoped>
.svg-icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>
